<template>
  <div class="box">
    <h2>展示由父组件传递来的参数: {{ count }}</h2>
    <h2>展示由父组件传递来的参数: {{ obj.name }}</h2>
    <button @click="changeCount">修改父组件传递过来的参数</button>
    <button @click="changeObj">修改引入数据类型</button>
    <br />
    <!-- 通过父组件传递过来的方法来修改数据 -->
    <!-- 使用父组件传递过来的方法可以修改引用数据类型的数据,且不会报错 -->
    <!-- 由父组件传递方法,子组件直接调用即可 -->
    <button @click="getCount">通过父组件传递过来的方法来修改数据</button>
    <button @click="getObj">通过父组件传递过来的方法来修改引用数据类型</button>
  </div>
</template>

<script>
export default {
  name: 'VChild',
  // 子组件使用props来接收由父组件传递过来的数据
  // 第一种接收值的方式
  // 写成一个数组,数组中的每一项都是由父组件传递过来的参数
  // props: ['count']

  // 第二种: 写成一个对象
  // 对象中以键值对的形式书写
  // 键: 传递过来的数据名
  // 值: 是传递过来数据的类型
  // props: {
  //  count: Number
  // }

  // 第三种接收方式 : 配置对象写法
  props: {
    count: {
      type: Number,
      required: true, // 设置是否必须传递
      default: 2 // 默认值(当组件使用没有传递参数则使用这个)

      // 但是注意: required 和 default  两个配置项是相斥的
      // 设想: 我们既要必须传递参数,还设置一个默认值比较不合理
    },
    // 接收引用数据类型
    obj: {
      type: Object,
      // 如果不写成括号包裹,则会将{}当成函数体来进行解析
      // 且传递引用数据类型,想要设置默认值则必须将值写成一个函数
      default: () => ({ name: '李四' })
    },
    getCount: {
      type: Function,
      required: true
    },
    getObj: {
      type: Function,
      required: true
    }
  },
  methods: {
    // 修改父组件传递过来的参数是不能被修改的,修改基本数据类型会立刻报错
    changeCount() {
      this.count++
    },
    // 可以修改,但是不建议,因为违反了单项数据流的规则
    changeObj() {
      this.obj.name = 'Tom'
    }
  }
}
</script>

<style scoped></style>
